Responsive Layout Settings
Description
The term responsive layout is commonly used to describe a layout that changes automatically depending on the screen size or screen orientation of the device that you are running on. For example, if you have a mobile device that has a relatively small rectangular screen, you might want the layout of the controls on that screen to change when then device goes from being held vertically to being held horizontally.
- Name
- Description
- Apply responsive layout settings
Unchecked, this checkbox lets you turn off the responsive layout settings.
- Responsive layout settings
This is where you will find the settings that allow you to define rules that change the layout of the UX component based on the type of device on which the component is running, its orientation and window size (in the case of a desktop browser). Clicking on the Responsive layout settings property will open the following Genie.
- Responsive rules mode
This dropdown list contains two options 'First True' and 'All True'. With the First True option the rules are evaluated until the first rule is found and then that rule and only that rule is applied. With the 'All True' option, all of the rules that are true are applied, not just the first one. In this case the 'active' rule becomes the last rule that was applied.
Videos
Responsive Layout - Modifying the Design of a Component Automatically Based on the Device and Screen Orientation
'Responsive' is the term used to refer to a layout design that automatically changes its layout based on the device on which it is running, the device orientation, and the size of the window (for browsers.) The UX Component has powerful tools for creating applications with responsive layouts.
In this video, we show how the Responsive Layout Genie can be used to create highly responsive UX designs.
See Also